<template>
    <div class="list">
        <div class="item" 
        :ref="item"
        v-for="(item, key) in letters" 
        :key="item"
        @touchstart="handleTouchStart"
        @touchmove="handleTouchMove"
        @touchend="handleTouchEnd"
        @click="handleLetterClick"
        >{{item}}</div>
    </div>
</template>

<script>
export default{
  name: 'CityAlphabet',
  props: {
      cities: Object
  },
  computed: {
      letters() {
          const letters = []
          for (let i in this.cities) {
              letters.push(i)
          }

          return letters
      }
  },
  data () {
      return {
          touchStatus: false,
          startY: 0,
          timer: null
      }
  },
  updated () {
    this.startY = this.$refs['A'][0].offsetTop  
  },
  methods: {
      handleLetterClick(e){
          this.$emit('change',e.target.innerText)
      },
      handleTouchStart () {
          this.touchStatus = true
      },
      handleTouchMove (e) {
          if(this.touchStatus){
              if(this.timer){
                  clearTimeout(this.timer)
              }
              this.timer = setTimeout(() => {
                const touchY = e.touches[0].clientY -79
                const index = Math.floor((touchY - this.startY) / 20)
                if(index >= 0 && index < this.letters.length){
                    this.$emit('change',this.letters[index])
                }
              }, 16);
              
              
          }
      },
      handleTouchEnd () {
          this.touchStatus = false
      }

  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl';
    .list
        display flex
        flex-direction column
        justify-content center
        position absolute
        top 1.58rem
        width .4rem
        right 0px
        bottom 0px
        .item
            line-height .4rem
            text-align center
            color $bgColor
</style>
